<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input
              size="medium"
              v-model="foodName"
              clearable
              placeholder="查询"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="getRecord()"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="">
            <el-button
              size="small"
              @click="EmptyShell()"
              type="warning"
              icon="el-icon-delete-solid"
              >清空</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="small"
              @click="addition(1)"
              icon="el-icon-circle-plus-outline"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table
          :data="tableData"
          v-loading="loadFlag"
          border
          style="width: 100%"
        >
          <el-table-column
            label="配料模版"
            prop="ingredientName"
            align="center"
          >
          </el-table-column>
          <el-table-column label="时间" prop="date" align="center">
          </el-table-column>
          <el-table-column label="人员" prop="batcher" align="center">
          </el-table-column>
          <el-table-column label="备注" prop="remarks" align="center">
          </el-table-column>
          <el-table-column label="操作" width="320" align="center">
            <template #default="scope">
              <el-button
                size="mini"
                type="primary"
                @click="editorPara(scope.row, 2)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagingClass">
          <el-pagination
            :page-sizes="m_page.sizes"
            :page-size="m_page.size"
            :current-page="m_page.number"
            @size-change="m_handleSizeChange"
            @current-change="m_handlePageChange"
            layout="total,sizes,prev, pager, next"
            background
            :total="m_page.totalElements"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="single"
      v-model="plassets"
      width="1250px"
      :close-on-click-modal="false"
    >
      <el-form :inline="true" ref="form" :model="form" label-width="100px">
        <el-form-item label="配料名称">
          <el-input v-model="form.menuname" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            style="width: 300px"
            v-model="form.dates"
            type="date"
            placeholder="选择日期"
            format="YYYY 年 MM 月 DD 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="配料人员">
          <el-select
            v-model="form.buyer"
            style="width: 300px"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in subbuyer"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            style="width: 300px"
            type="textarea"
            :rows="2"
            v-model="form.addnote"
            placeholder="备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="配料明细" style="width: 100%">
          <el-button type="success" plain @click="addLine()">新增</el-button>
          <el-table :data="detailList" border style="width: 1100px">
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column label="商品名称" width="250">
              <template #default="scope">
                <el-input
                  style="width: 180px"
                  v-model="scope.row.productName"
                  placeholder="请输入内容"
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="get_product(scope.$index)"
                ></el-button>
              </template>
            </el-table-column>
            <el-table-column label="商品编号" width="130">
              <template #default="scope">
                <el-input
                  v-model="scope.row.productNumber"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" width="130">
              <template #default="scope">
                <el-input
                  v-model="scope.row.productSpecifications"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="仓库" width="130">
              <template #default="scope">
                <el-input
                  v-model="scope.row.warehouseId"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单位" width="130">
              <template #default="scope">
                <el-input
                  v-model="scope.row.unit"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单价" width="130">
              <template #default="scope">
                <el-input
                  v-model="scope.row.price"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数量" width="100">
              <template #default="scope">
                <el-input
                  v-model.number="scope.row.number"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="图片" width="130"> </el-table-column>
            <el-table-column label="虚拟库存" width="100" fixed="right">
              <template #default="scope">
                <el-input
                  v-model="scope.row.virtualInventory"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" width="150" fixed="right">
              <template #default="scope">
                <el-button
                  type="text"
                  @click="deleteunused(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button @click="plassets = false">取 消</el-button>
          <el-button type="primary" v-if="under == 1" @click="determine()"
            >确 定</el-button
          >
          <el-button @click="hardware()" v-else type="primary"
            >编辑 确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 选择配料弹框 -->
    <el-dialog
      title="选择产品"
      v-model="calendars"
      width="900px"
      :close-on-click-modal="false"
    >
      <commodity
        ref="child"
        @saveCalendar="saveCalendar"
        @closeCalendar="canceloff"
      ></commodity>
    </el-dialog>
  </div>
</template>

<script>
import commodity from "@/components/commodity";
import dayjs from "dayjs";
export default {
  components: {
    commodity,
  },
  data() {
    return {
      loadFlag: false, //加载flag
      foodName: "",
      form: {
        menuname: "",
        dates: "",
        buyer: "",
        addnote: "",
      },

      detailList: [
        {
          productId: "",
          productName: "", //产品名称
          productNumber: "", //产品编号
          productSpecifications: "", //产品规格
          warehouseId: "", //仓库
          unit: "", //单位
          price: "", //产品单价
          number: "", //数量
          virtualInventory: "", //虚拟库存
          file: "", //图片
        },
      ],
      subbuyer: [],
      tableData: [],
      single: "",
      plassets: false,
      calendars: false,
      under: 1,
      csListIndex: null,
      headers: "",
      underID: "",
      m_page: {
        sizes: [10, 20, 40, 50, 100], //每页最大显示数
        size: 10,
        totalElements: 0,
        totalPages: 3,
        number: 1,
      },
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.getRecord();
    this.production();
  },
  methods: {
    onSubmit() {},
    //删除
    handleDelete(row) {
      let into = row;
      console.log(into);
      this.$confirm("确认删除该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              `api/serial/MixedIngredients`,
              {
                id: into.id,
                ingredientName: into.ingredientName, //配料名称
                date: into.dates, //时间
                batcherId: into.batcherId, //人员
                remarks: into.remarks, //备注
                // mixedIngredientsDetails: into.mixedIngredientsDetails,
                isDelete: 1,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              // console.log(res);
              this.getRecord();
              this.$message.success("删除成功");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑
    hardware() {
      this.$axios
        .post(
          `api/serial/MixedIngredients`,
          {
            id: this.underID,
            ingredientName: this.form.menuname, //配料名称
            date: dayjs(this.form.dates).format("YYYY-M-D"), //时间
            batcherId: this.form.buyer, //人员
            remarks: this.form.addnote, //备注
            mixedIngredientsDetails: this.detailList,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          this.getRecord();
          this.plassets = false;
        })
        .catch(() => {
          this.$message.error("编辑失败");
        });
    },
    editorPara(row, index) {
      // console.log(row);
      this.under = index;
      this.underID = row.id;
      this.plassets = true;
      this.$axios({
        methods: "GET",
        url: "api/serial/MixedIngredients",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,
          query: {
            id: this.underID,
          },
        },
      }).then((res) => {
        // console.log(res);
        let state = res.data.data[0];
        console.log(state);
        this.form.menuname = state.ingredientName;
        this.form.dates = state.date;
        this.form.buyer = state.batcherId;
        this.form.addnote = state.remarks;
        this.detailList = state.mixedIngredientsDetails;
      });
    },
    //确定
    determine() {
      this.$axios
        .post(
          `api/serial/MixedIngredients`,
          {
            ingredientName: this.form.menuname, //配料名称
            date: dayjs(this.form.dates).format("YYYY-M-D"), //时间
            batcherId: this.form.buyer, //人员
            remarks: this.form.addnote, //备注
            mixedIngredientsDetails: this.detailList,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.getRecord();
          this.plassets = false;
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },
    addition(index) {
      this.under = index;
      this.single = "新增配料";
      this.plassets = true;
      this.notEmpty();
    },
    EmptyShell() {
      this.foodName = "";
      this.getRecord();
    },
    notEmpty() {
      this.underID = "";
      this.form.menuname = "";
      this.form.dates = "";
      this.form.addnote = "";
      this.form.buyer = "";
      this.detailList.forEach((item) => {
        item.productId = "";
        item.productName = ""; //产品名称
        item.productNumber = ""; //产品编号
        item.productSpecifications = ""; //产品规格
        item.warehouseId = ""; //仓库
        item.unit = ""; //单位
        item.price = ""; //产品单价
        item.number = ""; //数量
        item.virtualInventory = ""; //小计
        item.file = ""; //图片
      });
    },
    addLine() {
      var newValue = {
        productId: "",
        productName: "", //产品名称
        productNumber: "", //产品编号
        productSpecifications: "", //产品规格
        warehouseId: "", //仓库
        unit: "", //单位
        price: "", //产品单价
        number: "", //数量
        virtualInventory: "", //虚拟库存
        file: "", //图片
      };
      this.detailList.push(newValue);
    },
    deleteunused(index) {
      //删除行数
      this.detailList.splice(index, 1);
    },
    getRecord() {
      this.loadFlag = true;
      this.$axios({
        methods: "GET",
        url: "api/serial/MixedIngredients",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,

          query: {
            ingredientName: this.foodName,
          },
        },
      }).then((res) => {
        console.log(res);
        ({ data: this.tableData, count: this.m_page.totalElements } = res.data);
        // this.tableData.forEach((item) => {
        //   item.startDate = dayjs(item.startDate).format("YYYY-M-D");
        // });
        this.loadFlag = false;
      });
    },
    //页码
    m_handlePageChange(currPage) {
      this.m_page.number = currPage;
      this.getRecord();
    },
    m_handleSizeChange(currSize) {
      this.m_page.size = currSize;
      this.getRecord();
    },
    //获取产品
    canceloff(data) {
      this.calendars = data;
    },

    saveCalendar(data) {
      // console.log(data);
      let parm = data;
      this.detailList[this.csListIndex].productId = parm.id;
      this.detailList[this.csListIndex].productName = parm.productName;
      this.detailList[this.csListIndex].productNumber = parm.productNumber;
      this.detailList[this.csListIndex].productSpecifications =
        parm.productSpecifications;
      this.detailList[this.csListIndex].warehouseId = parm.warehouseId;
      this.detailList[this.csListIndex].unit = parm.unit;
      this.detailList[this.csListIndex].price = parm.unitPrice;
      this.detailList[this.csListIndex].virtualInventory =
        parm.virtualInventory;
      this.detailList[this.csListIndex].file = parm.file;
      this.calendars = false;
    },
    get_product(index) {
      this.calendars = true;
      this.csListIndex = index;
      this.$nextTick(() => {
        this.$refs.child.getProducts();
        // console.log(this.$refs.child);
      });
    },
    //获取人员
    production() {
      this.$axios
        .get(`api/serial/Users?pageSize=${100}&pageIndex=${1}`, {
          headers: {
            Authorization: this.headerObj,
          },
        })
        .then((res) => {
          this.dateEnd = res.data.data;
          let fwork = [];
          this.dateEnd.forEach((item) => {
            fwork.push({
              value: item.id,
              label: item.name,
            });
          });

          this.subbuyer = fwork;
        });
    },
  },
};
</script>

<style scoped>
</style>